import { View, Image, Text } from '@tarojs/components';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { useEffect, useState, useRef } from 'react'
import QRCode from '@/utils/weapp-qrcode.js'

import './style.scss';

function CinemaDetail({dispatch}) {
  const [info, setinfo] = useState({});
  const [codeImg,setCodeImg] = useState('')
  const interval = useRef(null);
  const getDetail = () => {
    Taro.$post(`/movie/ticket_info?orderNo=${getCurrentInstance().router.params.orderId}`).then(res=>{
      setinfo(res);
      if(res.qrCodeValue){
        setCodeImg(QRCode.drawImg(res.qrCodeValue, {
          size: 320
        }))
      }
      if(res.status == 7){ //轮询
        if(!interval.current){
          interval.current = setInterval(getDetail, 1000);
        }
      }else{
        clearInterval(interval.current);
        interval.current = null
      }
    })
  }
  useEffect(() => {
    getDetail()
    return ()=>{
      if(interval.current){
        clearInterval(interval.current);
        interval.current = null
      }
    }
  }, []);
  return (
    <View className="orderDetail">
      <View className="wrap">
        <View className="or-xq">
          <View className="content">
            <View className="section">
              <View className="li-pad">
                <View className="pad-t">
                  <View className="name">{info.movieName}</View>
                  <View className="lang">{info.movieType}</View>
                </View>
                <View className="pad-b">
                  <View className="p-b-l">
                    <View className="date">{info.time}</View>
                    <View className="txt">{info.cinemaName}</View>
                    <View className="txt">{info.hall}</View>
                    <View className="txt">{info.seatList && info.seatList.join(',')}</View>
                  </View>
                  <Image src={info.bannerVSmallUrl} className="poster" />
                  {
                    info.status == 1 || info.status == 3 || info.status == 8 ? <Image src={require('@/images/2.png')} className="stamp" /> : null
                  }
                  {
                    info.status == 5 || info.status == 6 ? <Image src={require('@/images/3.png')} className="stamp" /> : null
                  }
                  {
                    info.status == 7 ? <Image src={require('@/images/1.png')} className="stamp" /> : null
                  }
                </View>
              </View>
              <Image src={require('@/images/icon26.jpg')} className="borb" mode="widthFix" />
            </View>
            {
              info.status == 1 || info.status == 3 || info.status == 8 ? <View className="section">
                <View className="li-pad">
                  <View className="or-qp">
                    <Text>取电影票</Text>
                    {codeImg?<Image className="canvas code-img" src={codeImg} />:null}
                    <View className='ticketNum'>{info.seatList.length}张电影票</View>
                    <View className="ticket-code">
                    {
                      info.takeTicketInfos.map(item=>(
                        <View className="code-row" key={item.value}>
                          <Text className='name'>{item.name}:</Text>
                          <Text>{item.value.replace(/(.{4})/g, '$1 ')}</Text>
                        </View>
                      ))
                    }
                  </View>
                  </View>
                </View>
                <Image src={require('@/images/icon27.jpg')} className="borb" mode="widthFix" />
              </View> : null
            }
            
            <View className="section">
              <View className="li-pad">
                <View className="flex">
                  <View className="cinemaInfo">
                    <View className="c-name">{info.cinemaName}</View>
                    <View className="c-address">{info.cinemaAddress}</View>
                  </View>
                  <Image
                    className="phone"
                    src={require('@/images/icon28.png')}
                    onClick={() => {
                      Taro.makePhoneCall({ phoneNumber: info.cinemaTel });
                    }}
                  />
                </View>
              </View>
              <Image src={require('@/images/icon27.jpg')} className="borb" mode="widthFix" />
            </View>
            <View className="section">
              <View className="li-pad">
                <View className="or-qp">
                  <Text>实付金额：</Text>
                  <Text className="red">{info.amount}</Text>
                  <Text className="yuan">元</Text>
                  <Text className="nortxt">（已优惠{info.discountPrice}元）</Text>
                </View>
                <View className="or-span">订单编号：{info.orderNo}</View>
                {
                  info.paymentTime ? <View className="or-span">购买时间：{info.paymentTime}</View> : null
                }
                
                <View className="or-span">手机号码：{info.mobile}</View>
                {/* <View className="or-span">电影票由 上影院线 提供</View> */}
              </View>
              <Image src={require('@/images/icon27.jpg')} className="borb" mode="widthFix" />
            </View>
            <View className="section">
              <View className="li-pad">
                <View className="or-qp">
                  <Text style={{ color: '#979797' }}>观影须知</Text>
                </View>
                <View className="gyxz">
                  <View>1、本影院凭票入场，一人一票，对号入座；</View>
                  <View>2、购票时请您当面核对票、款，影票售出后，不予退换；</View>
                  <View>
                    3、身高不足120CM的儿童免费观影（含120CM），须由一名成人陪同，婴幼谢绝入场；
                  </View>
                  <View>
                    4、购票前，请先了解该场次的播放时间、片名，购票时，请确定好购票各类、人数、座位；
                  </View>
                  <View>5、会员购票须出示会员卡，才能享受会员折扣；</View>
                  <View>6、影片上映预告如有变化，请以影院当日公告为准；</View>
                  <View>7、影院拒收假币，发现假币一律没收并报警；</View>
                  <View>8、本影院谢绝外带食品；</View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}

export default CinemaDetail

